<template>
    <div class="all" ref="all">
        <div class="alls" v-for="item in goods" :key="item.id">
            <div class="top">
            <div class="leftOne">{{item.name}}</div>
            <div class="rightOne">
                <div class="ul" v-for="it in item.children" :key="it.id">
                    <div class="a">{{it.name}}</div>
                </div>
                <router-link class="rightItem" to="/">查看全部 ></router-link>
            </div>
        </div>
        <div class="foot">
            <div class="leftTwo">
                <img  v-lazy="item.picture" >
                <div class="leftZhe">
                    <span class="leftZheOne">{{item.name}}</span>
                    <span class="leftZheTwo">{{item.saleInfo}}</span>
                </div>
            </div>
            <ul class="rightTwo">
                <li v-for="i in item.goods" :key="i.id">
                    <img v-lazy="i.picture" >
                    <div class="div">
                        <p class="d">{{i.name}}</p>
                        <p class="k">{{i.desc}}</p>
                        <p class="o">¥{{i.price}}</p>
                    </div>
                    <div class="zhe">
                        <div class="zheTop">找相似</div>
                        <div class="zheFoot">发现很多宝贝 ></div>
                    </div>
                </li>
                
               
            </ul>
        </div>
        </div>
       
    </div>
</template>



<script>
import { getGoods } from '@/Api/homeapi'
import {server} from '@/Api/constUp'
export default {
    data() {
        return {
            goods:[]
        }
    },
    methods:{
        async getGood(){
            let {data:res} = await getGoods()
            this.goods = res.result
        }
    },
    mounted(){
        // this.getGood()
       server(this.$refs.all,this.getGood)
    }
}
</script>


<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.alls{
    width: 100%;
    height: 100%;
}
.all {
    width: 1240px;
    // background: orange;
    margin: auto;

    .top {
        width: 100%;
        height: 35px;
        margin-top: 40px;
        margin-bottom: 40px;
        // background: yellow;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftOne {
            font-size: 35px;
        }

        .rightOne {
            width: 600px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ul {
                width: 400px;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .a {
                    flex: 1;
                    height: 100%;
                    text-align: center;
                    line-height: 35px;
                    border-radius: 5px;
                }

                .a:hover {
                    color: white;
                    background: $xtxColor;
                }
            }

            .rightItem {
               width: 300px;
                color: gray;
                text-decoration: none;
            }

            .rightItem:hover {
                color: $xtxColor;
            }
        }
    }

    .foot {
        width: 100%;
        height: 610px;
        display: flex;
        justify-content: space-between;
        // background: yellow;

        .leftTwo {
            width: 240px;
            height: 100%;
            position: relative;
            // background: orange;

            img {
                width: 100%;
                height: 100%;
            }
            .leftZhe{
                width: 188px ;
                height: 66px ;
                color: white;
                position: absolute;
                font-size: 20px;
                top: 30%;
                left: 0;
                transform: translateY(50%);
                .leftZheOne{
                    height: 66px;
                    width: 76px;
                    background: black;
                    text-align: center;
                    line-height: 66px;
                    box-sizing: border-box;
                    display: inline-block;
                }
                .leftZheTwo{
                    width: 112px;
                    height: 66px;
                    text-align: center;
                    line-height: 66px;
                    background: rgba(0,0,0,0.8);
                    box-sizing: border-box;
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    // overflow: hidden;
                }

            }
        }

        .rightTwo {
            width: 990px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            flex-wrap: wrap;
            // background: plum;

            li {
                width: 240px;
                height: 300px;
                // background: bisque;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding: 10px 30px;
                position: relative;
                overflow: hidden;

                img {
                    width: 160px;
                    height: 160px;
                    // background: pink;
                }

                .div {
                    width: 160px;

                    .d {
                        font-size: 15px;
                    }

                    .k {
                        width: 160px;
                        color: gray;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap
                    }

                    .o {
                        color: red;
                        font-size: 20px;
                    }
                }

                .zhe {
                    width: 100%;
                    height: 80px;
                    background: turquoise;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    transition: all 1s;
                    transform: translateY(80px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;

                    .zheTop {
                        width: 60%;
                        line-height: 40px;
                        text-align: center;
                        color: white;
                        border-bottom: 1px solid white;
                    }

                    .zheFoot {
                        width: 60%;
                        line-height: 40px;
                        text-align: center;
                        color: white;
                    }
                }
            }

            li:hover {
                border: 1px solid $xtxColor;

                .zhe {
                    transform: translateY(0);
                }
            }
        }

    }
}
</style>


